<template>
  <view class="content">
    <view class="good" v-for="(item, index) of list" :key="item.id">
      <view class="item">
        <view class="con">
          <view class="img">
            <image :src="item.cover_pic"></image>
          </view>
          <view class="txt">
            <view class="name">{{ item.goods_name }}</view>
            <view class="attr">{{ item.attr_names }}</view>
            <view class="price">售价 ¥ {{ item.price }}</view>
          </view>
        </view>

        <view class="inpItem">
          <view class="inpItemLet">商品库存</view>

          <view class="inpItemRig">
            <input v-model="item.num" placeholder="请输入商品库存" />
          </view>
        </view>

        <view class="remove">
          <view @click="remove(index)">删除</view>
        </view>
      </view>
    </view>

    <view class="submit safe-area-inset-bottom">
      <view class="m-btn" @click="submit"> 入库 </view>
    </view>

    <transitionPage></transitionPage>
  </view>
</template>

<script>
import api from "../api/index";

export default {
  data() {
    return {
      goods_no: "",
      list: []
    };
  },

  onLoad(opi) {
    if (opi?.goods_no) this.goods_no = opi.goods_no;
    this.getData();
  },

  computed() {},

  methods: {
    remove(index) {
      this.$u.throttle(() => {
        this.$utils.showModal(
          "提示",
          "是否删除？",
          true,
          () => {
            this.list.splice(index, 1);
          },
          () => {}
        );
      }, 500);
    },

    submit() {
      this.$u.throttle(() => {
        this.getData("purchaseInSave");
      }, 500);
    },

    async getData(type = "erpScanGetGoodsList") {
      try {
        const { goods_no, list } = this;
        const params = {};
        switch (type) {
          case "erpScanGetGoodsList":
            params.goods_no = goods_no;
            break;

          case "purchaseInSave":
            if (!list.length) throw "没有对应的商品";
            if (list.some((el) => !el.num)) throw "入库数量不能为0";
            params.purchase = list.map((el) => {
              return {
                num: el.num,
                id: el.id
              };
            });
            break;
        }

        const res = await api[type](params, true);

        if (!res.code) {
          switch (type) {
            case "erpScanGetGoodsList":
              this.list = res.data.list || [];
              break;

            case "purchaseInSave":
              this.$utils.showModal(
                "提示",
                "操作成功！",
                false,
                () => {
                  this.$utils.goBack();
                },
                () => {}
              );
              break;
          }

          return;
        }

        this.$utils.toast(res.msg);
      } catch (error) {
        this.$utils.toast(error);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  padding: 24rpx;
  min-height: 100vh;
  background: #f2f2f2;
}

.submit {
  position: fixed;
  left: 30rpx;
  right: 30rpx;
  bottom: 10rpx;
  background: #fff;
  z-index: 3;
}

.m-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40rpx;
  height: 80rpx;
  background: #f0250e;
  border-radius: 32px;
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;

  .iconfont {
    margin-right: 14rpx;
    font-size: 40rpx;
  }
}

.good {
  .item {
    margin-bottom: 20rpx;
    padding: 24rpx;
    background: #fff;
    border-radius: 20rpx;
  }

  .con {
    display: flex;
    justify-content: center;
  }

  .img,
  image {
    width: 180rpx;
    height: 180rpx;
  }

  .txt {
    margin-left: 24rpx;
    flex: 1;
    overflow: hidden;
    font-weight: bold;
  }

  .name {
    padding-bottom: 26rpx;
    font-size: 28rpx;
  }

  .attr {
    font-size: 26rpx;
    color: #999;
  }

  .price {
    color: #f0250e;
  }

  .remove {
    display: flex;
    justify-content: flex-end;

    view {
      padding: 12rpx 24rpx;
      background: #fdf1f0;
      border-radius: 32px;
      font-size: 24rpx;
      color: #f0250e;
      font-size: 24rpx;
    }
  }
}

.inpItem {
  display: flex;
  align-items: center;
  margin: 24rpx 0;
  padding: 0 24rpx;
  border-radius: 20rpx;
  background: #efefef;

  .inpItemLet {
    margin-right: 60rpx;
  }

  .inpItemRig {
    flex: 1;
    overflow: hidden;
  }
}

input {
  font-size: 30rpx;
  color: #333;
  width: 100%;
}

input,
picker {
  width: 100%;
  height: 80rpx;
  font-size: 24rpx;
  color: #333;
}
</style>
